<script setup lang="ts">
definePageConfig({
  navigationBarTitleText: '身份证验证'
});

import { ref, reactive, watch } from 'vue';
import { useToast } from '@/composables';
import { useNurseUser } from '@/service';
import { useAuthStore } from '@/store';
import Taro from '@tarojs/taro';

const userStore = useAuthStore();
const { edit } = useNurseUser();
const toast = useToast();

// 表单数据
const form = reactive({
  idcard: userStore.nurseUser.idcard || '',
  name: userStore.nurseUser.name || ''
});

// 错误状态
const errors = reactive({
  idcard: '',
  name: ''
});

// 身份证验证函数
const validateIdCard = (idCard: string): string => {
  if (!idCard) {
    return '请输入身份证号码';
  }
  if (idCard.length !== 18) {
    return '请输入18位身份证号码';
  }
  if (!/^\d{17}(\d|X|x)$/.test(idCard)) {
    return '身份证号码格式不正确';
  }
  return '';
};

// 姓名验证函数
const validateName = (name: string): string => {
  if (!name) {
    return '请输入姓名';
  }
  if (name.length < 2) {
    return '姓名至少2个字符';
  }
  return '';
};

// 实时验证身份证
watch(() => form.idcard, (newValue) => {
  errors.idcard = validateIdCard(newValue);
});

// 实时验证姓名
watch(() => form.name, (newValue) => {
  errors.name = validateName(newValue);
});

// 检查表单是否有效
const isFormValid = () => {
  return !errors.idcard && !errors.name && form.idcard && form.name;
};

// 提交表单
const submitForm = async () => {
  // 最终验证
  errors.idcard = validateIdCard(form.idcard);
  errors.name = validateName(form.name);
  
  if (!isFormValid()) {
    toast.error('请检查输入信息');
    return;
  }
  
  try {
    toast.loading('验证中...');
    
    const res = await edit({
      ...userStore.nurseUser,
      idcard: form.idcard.trim(),
      name: form.name.trim()
    });

    userStore.nurseUser.idcard = form.idcard.trim();
    userStore.nurseUser.name = form.name.trim();
    
    if (!res.error) {
      toast.success('验证成功');
      setTimeout(() => {
        Taro.navigateBack();
      }, 1500);
    } else {
      toast.error(res.error?.message || '验证失败，请检查信息');
    }
  } catch (error: any) {
    toast.error(error.message || '验证失败，请稍后再试');
  }
};
</script>

<template>
  <basic-layout>
    <view class="container">
      <!-- 提示信息 -->
      <view class="info-banner">
        <view class="info-content">
          <view class="info-icon"></view>
          <view class="info-text">
            请输入真实的18位身份证信息，信息将被严格加密保护
          </view>
        </view>
      </view>
      
      <!-- 表单 -->
      <view class="form-container">
        <!-- 身份证号 -->
        <view class="form-item">
          <view class="form-label">
            <text class="required">*</text>
            <text class="label-text">身份证号</text>
          </view>
          <input 
            v-model="form.idcard"
            class="form-input"
            :class="{ 'border-red-500': errors.idcard }"
            placeholder="请输入18位身份证号码"
            maxlength="18"
            @input="form.idcard = form.idcard.toUpperCase()"
          />
          <view v-if="errors.idcard" class="error-message">
            {{ errors.idcard }}
          </view>
        </view>
        
        <!-- 姓名 -->
        <view class="form-item">
          <view class="form-label">
            <text class="required">*</text>
            <text class="label-text">姓名</text>
          </view>
          <input 
            v-model="form.name"
            class="form-input"
            :class="{ 'border-red-500': errors.name }"
            placeholder="请输入您的真实姓名"
            maxlength="10"
          />
          <view v-if="errors.name" class="error-message">
            {{ errors.name }}
          </view>
        </view>
        
        <!-- 确认按钮 -->
        <view class="button-container">
          <button 
            @click="submitForm"
            :disabled="!isFormValid()"
            class="submit-button"
            :class="{ 'opacity-50': !isFormValid() }"
          >
            确认提交
          </button>
        </view>
      </view>
      
      <!-- 隐私政策 -->
      <view class="privacy-policy">
        <text class="policy-text">点击"确认提交"，即表示您同意</text>
        <text class="policy-link">《实名认证服务协议》</text>
        <text class="policy-text">和</text>
        <text class="policy-link">《隐私政策》</text>
      </view>
    </view>
  </basic-layout>
</template>

<style lang="scss">
.container {
  background-color: white;
  min-height: 100vh;
  padding: 16px;
}

.info-banner {
  background-color: #eff6ff;
  border-left: 4px solid #3b82f6;
  padding: 16px;
  border-radius: 0 6px 6px 0;
  margin: 16px 0;
}

.info-content {
  display: flex;
  align-items: flex-start;
}

.info-icon {
  width: 16px;
  height: 16px;
  background-color: #3b82f6;
  border-radius: 50%;
  margin-top: 2px;
  margin-right: 8px;
}

.info-text {
  font-size: 14px;
  color: #1e40af;
  line-height: 1.4;
}

.form-container {
  margin-top: 24px;
}

.form-item {
  margin-bottom: 16px;
}

.form-label {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
}

.required {
  color: #ef4444;
  margin-right: 4px;
}

.label-text {
  color: #374151;
}

.form-input {
  width: 100%;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.2s;
  box-sizing: border-box;
  height: 44px;
  line-height: 44px;
  text-align: left;
  background-color: white;
}

.form-input::placeholder {
  color: #9ca3af;
  font-size: 14px;
}

.form-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.form-input.border-red-500 {
  border-color: #ef4444;
  border-width: 1px;
}

.form-input.border-red-500:focus {
  border-color: #ef4444;
  border-width: 1px;
}

.error-message {
  color: #ef4444;
  font-size: 12px;
  margin-top: 4px;
}

.button-container {
  margin-top: 24px;
}

.submit-button {
  width: 100%;
  padding: 12px 16px;
  background-color: #10b981;
  color: white;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  border: none;
  transition: all 0.2s;
}

.submit-button:hover {
  background-color: #059669;
}

.submit-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.submit-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.privacy-policy {
  margin-top: 16px;
  text-align: center;
  font-size: 12px;
  color: #6b7280;
}

.policy-text {
  color: #6b7280;
}

.policy-link {
  color: #3b82f6;
}
</style>